<template>
	<view class="dialog-container" v-if="display">
		<view class="dialog-background" @click="clickToHide"></view>
		<view class="dialog-main">
			<view class="dialog-title">{{title}}</view>
			<slot></slot>
			<text @click="clickConfirm" class="dialog-btn">{{confirmText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dialog-shell",
		props: {
			title: {
				type: String,
				required: true,
				validator: (val) => {
					return val.length > 0
				}
			},
			confirmText: {
				type: String,
				default: "确定",
				required: false,
				validator: (val) => {
					return val.length > 0
				}
			}
		},
		data() {
			return {
				display: false
			};
		},
		methods: {
			clickToHide() {
				this.display = false
			},
			show() {
				this.display = true
			},
			clickConfirm() {
				this.$emit("confirm")
				this.display = false
			}

		}
	}
</script>

<style>
	@import url("dailog-shell.css");
</style>
